<template>
	<view class="wrapper">
		<!-- 背景图 -->
		<view
			class="background-images"
			:style="{
				background: 'linear-gradient(to bottom , #fc2f1e, #f9921a)'
			}"
		>
			<image
				src="@/static/images/caidai.png"
				mode="aspectFill"
				class="ImageBG"
			></image>
		</view>
		<view class="cell">
			<block v-for="(item, index) in list" :key="index">
				<view
					class="CellItem"
					:class="
						index == 4 || index === sel ? 'YellowBackground' : 'WhiteBackground'
					"
					@tap="begin(index)"
				>
					<view
						class="CellItemContent"
						:class="index == 4 || index === sel ? 'Yellow' : 'white'"
					>
						<image
							:src="item.image"
							mode="scaleToFill"
							class="ItemImage"
							v-if="item.image"
						></image>
						<view class="">
							<text class="text">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sel: '',
			FastNums: 0,
			SlowNums: 0,
			time: 1000,
			loopStatus: false,
		};
	},
	props:{
		list:{
			type:Array,
			default:()=>([
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/dajiang.png',
					name: '神秘大奖'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/10yuan.png',
					name: '10元代金券'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/30yuan.png',
					name: '30元代金券'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/50yuan.png',
					name: '50元代金券'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/begin.png',
					name: '立即抽奖'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/50yuan.png',
					name: '50元代金券'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/30yuan.png',
					name: '30元代金券'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/10yuan.png',
					name: '10元代金券'
				},
				{
					image:
						'https://shop.al1ydb.com/static/ShopIndex/LuckyWheel/thanks.png',
					name: '谢谢参与'
				}
			])
		},
		// 中奖序号
		activeIndex:{
			type:[Number,String],
			default:8
		},
		// 滚动速度
		speed:{
			type:[Number,String],
			default:50
		},
		// 最后一圈滚动速度
		lastSpeed:{
			type:[Number,String],
			default:300
		}
	},
	methods: {
		begin(index) {
			if (index == 4 && !this.loopStatus) {
				this.FastNums = 0;
				this.SlowNums = 0;
				this.time = this.speed;
				this.loopStatus = true;
				this.$emit('start')
				this.loop();
				
			}
		},
		loop() {
			if (!this.sel || this.sel < 9) {
				if (this.sel == 3) {
					this.sel = 0;
				} else if (this.sel === '') {
					this.sel = 0;
				} else if (this.sel == 2) {
					this.sel = 5;
				} else if (this.sel == 5) {
					this.sel = 8;
				} else if (this.sel == 8) {
					this.sel = 7;
				} else if (this.sel == 7) {
					this.sel = 6;
				} else if (this.sel == 6) {
					this.sel = 3;
				} else {
					this.sel++;
				}
				this.FastNums++;
				if (this.FastNums == 4) {
					this.FastNums = 0;
					this.time = this.speed;
					this.SlowNums++;
				}
				if (this.SlowNums == 8) {
					this.SlowNums = 0;
					this.time = this.lastSpeed;
					this.FastNums = 5;
				}
				if (this.FastNums > 5) {
					if (this.sel == this.activeIndex) {
						this.loopStatus = false;
						this.$emit('end');
					}
				}
				if (this.loopStatus) {
					setTimeout(() => {
						this.loop();
					}, this.time);
				}
			}
		}
	}
};
</script>

<style scoped lang="less">
.wrapper {
	width: 100vw;
	height: 100vh;
	/* #ifdef H5 */

	height: calc(100vh - 44px);
	/* #endif */
}
.background-images {
	width: 100%;
	height: 100%;
	image {
		width: 100%;
		height: 100%;
	}
}
.cell {
	position: absolute;
	top: 0upx;
	height: 600upx;
	display: flex;
	width: 600upx;
	flex-wrap: wrap;
	margin: auto;
	left: 0upx;
	right: 0;
	bottom: 0;
}
.CellItem {
	width: 188rpx;
	height: 188rpx;
	border-radius: 30rpx;
	margin: 5rpx 4rpx;
}
.CellItemContent {
	width: 188rpx;
	height: 168rpx;
	border-radius: 30rpx;
	text-align: center;
}
.white {
	background-color: #fdf2ee;
}
.WhiteBackground {
	background-color: #f8d0c3;
}
.Yellow {
	background-color: #ffcc00;
	color: #ffffff;
}
.YellowBackground {
	background-color: #dd8e03;
}

.ItemImage {
	width: 90rpx;
	height: 90rpx;
	margin-top: 10rpx;
}
.text {
	font-size: 28rpx;
}
</style>
